<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>upload file</title>
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <link rel="stylesheet" href="./style.css">
</head>

<body>
  <div id="app">
    <section>
      <h3 class="title">普通上传</h3>
      <div class="upload-wrapper">
        <div class="btn-group">
          <el-button
            type="primary"
            size="small"
            @click="handleFileSelect('normalFileInput')"
          >选择文件</el-button>
          <el-button
            type="success"
            size="small"
            :disabled="!normalFile"
            @click="handleNormalUpload"
          >上传</el-button>
          <input
            ref="normalFileInput"
            type="file"
            class="file-input"
            @change="handleNormalFileChange"
          >
        </div>
        <div class="file-wrapper">
          <div class="file-item">
            <p class="file-info" v-show="normalFile">
              <i class="el-icon-document icon" style="color: #909399;"></i>
              <span class="name">{{ normalFile ? normalFile.name : '' }}</span>
              <span class="percentage" v-show="normalUploading">{{ normalPercentage }}%</span>
              <i class="el-icon-circle-check" style="color: #67C23A;" v-show="!normalUploading"></i>
            </p>
            <el-progress
              v-show="normalUploading"
              :percentage="normalPercentage"
              :show-text="false"
            ></el-progress>
          </div>
        </div>
      </div>
    </section>
    <section>
      <h3 class="title">大文件上传</h3>
      <div class="upload-wrapper">
        <div class="btn-group">
          <el-button
            type="primary"
            size="small"
            @click="handleFileSelect('BigFileInput')"
          >选择文件</el-button>
          <el-button
            type="success"
            size="small"
            :disabled="!bigFile"
            @click="handleBigFileUpload"
          >上传</el-button>
          <input
            ref="BigFileInput"
            type="file"
            class="file-input"
            @change="handleBigFileChange"
          >
        </div>
        <div class="file-wrapper">
          <div class="file-item">
            <p class="file-info" v-show="bigFile">
              <i class="el-icon-document icon" style="color: #909399;"></i>
              <span class="name">{{ bigFile ? bigFile.name : '' }}</span>
              <span class="percentage" v-show="bigFileUploading">{{ bigFilePercentage }}%</span>
              <i class="el-icon-circle-check" style="color: #67C23A;" v-show="!bigFileUploading"></i>
            </p>
            <el-progress
              v-show="bigFileUploading"
              :percentage="bigFilePercentage"
              :show-text="false"
            ></el-progress>
          </div>
        </div>
      </div>
    </section>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.26.1/axios.min.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/spark-md5/3.0.0/spark-md5.min.js"></script>
  <script src="./index.js"></script>
  
</body>

</html>